<template>
    <div class="singer-container">
        <SingerCard 
            v-for="(singer, index) in currentPageSingers" 
            :key="index" 
            :singer="singer"
        />
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
        <div class="pagination">
            <button 
                class="page-btn" 
                :disabled="currentPage === 1"
                @click="goToPage(currentPage - 1)"
            >
                &lt;
            </button>
            
            <div class="page-numbers">
                <button 
                    v-for="page in visiblePages" 
                    :key="page"
                    class="page-number"
                    :class="{ active: page === currentPage }"
                    @click="goToPage(page)"
                >
                    {{ page }}
                </button>
            </div>
            
            <button 
                class="page-btn" 
                :disabled="currentPage === totalPages"
                @click="goToPage(currentPage + 1)"
            >
                &gt;
            </button>
            
            <div class="jump-page">
                <span>跳至</span>
                <input 
                    v-model.number="jumpPageNumber" 
                    type="number" 
                    :min="1" 
                    :max="totalPages"
                    class="jump-input"
                    @keyup.enter="jumpToPage"
                />
                <span>页</span>
                <button class="jump-btn" @click="jumpToPage">跳转</button>
            </div>
            
            <div class="page-info">
                共 {{ totalItems }} 项，第 {{ currentPage }} / {{ totalPages }} 页
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import SingerCard from './SingerCard.vue';

const currentPage = ref(1);
const pageSize = 10;
const jumpPageNumber = ref(1);
const totalItems = ref(999); // 实际总数
const singers = ref([]);

// 生成歌手数据
onMounted(() => {
    for (let i = 1; i <= 999; i++) {
        singers.value.push({
            id: i,
            name: `${i}`,
            avatar: 'https://picsum.photos/99/99?random=' + i
        });
    }
    // for (let i = 1; i <= 999; i++) {
    //     singers.value.push({
    //         id: i,
    //         name: `${i}`,
    //         avatar: 'https://picsum.photos/99/99?random=' + i
    //     });
    // }
});

// 当前页显示的歌手列表
const currentPageSingers = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    return singers.value.slice(start, end);
});

const totalPages = computed(() => Math.ceil(totalItems.value / pageSize));

const visiblePages = computed(() => {
    const pages = [];
    const total = totalPages.value;
    const current = currentPage.value;
    
    if (total <= 7) {
        for (let i = 1; i <= total; i++) {
            pages.push(i);
        }
    } else {
        if (current <= 4) {
            for (let i = 1; i <= 5; i++) {
                pages.push(i);
            }
            pages.push('...');
            pages.push(total);
        } else if (current >= total - 3) {
            pages.push(1);
            pages.push('...');
            for (let i = total - 4; i <= total; i++) {
                pages.push(i);
            }
        } else {
            pages.push(1);
            pages.push('...');
            for (let i = current - 1; i <= current + 1; i++) {
                pages.push(i);
            }
            pages.push('...');
            pages.push(total);
        }
    }
    return pages;
});

const goToPage = (page) => {
    if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page;
    }
};

const jumpToPage = () => {
    if (jumpPageNumber.value >= 1 && jumpPageNumber.value <= totalPages.value) {
        currentPage.value = jumpPageNumber.value;
    }
};
</script>

<style scoped>
.singer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 60px; /*左侧留空 */
    padding-right: 60px; /*右侧留空 */
}

.singer-container > * {
    flex: 0 0 calc(20% - 10px);
}

.pagination-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
    margin-left: -35px;
    padding: 20px 0;
    min-width: 1200px;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
}

.pagination {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 1000px;
    flex-shrink: 0;
    width: 100%;
    min-width: 1200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.page-btn {
    padding: 12px 16px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
    color: #ff0000;
}

.page-btn:disabled {
    background-color: rgba(34, 34, 34, 0.3);
    color: #666;
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    gap: 5px;
    align-items: center;
}

.page-number {
    padding: 12px 12px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 40px;
}

.page-number:hover {
    color: #ff0000;
}

.page-number.active {
    background-color: #ff0000;
    color: #fff;
}

.jump-page {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
}

.jump-input {
    width: 60px;
    padding: 12px 8px;
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 0;
    text-align: center;
}

.jump-input:focus {
    outline: none;
    border-color: #ff0000;
}

.jump-btn {
    padding: 12px 12px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jump-btn:hover {
    color: #ff0000;
}

.page-info {
    color: #ccc;
    font-size: 14px;
    white-space: nowrap;
}
</style>